Echarts 柱状图 渐变色 自定义配置 |
您所在的位置：网站首页 › echarts 柱状图颜色渐变 › Echarts 柱状图 渐变色 自定义配置 |
Echarts 柱状图 渐变色 自定义配置
|
最近在做图表，不做不知道，里边的细节点好多……记录下这些配置，方便后续使用~~~ 渐变色详解参考：https://zhuanlan.zhihu.com/p/183893861 效果图： 遇到的问题： （1）改变 legend 图标和文字位置：使之对齐 之前： top: -3 改变 legend 距离上边的位置 padding: [3, 0, 0, 0], 改变 legend 的文字和图标对齐问题 legend: { itemWidth: 12, itemHeight: 12, data: ['已完成', '未完成', '已超时', '未分配'], left: -5, // 距离左边 top: -3, formatter: function (name) { var arr = ['{a|' + name + '}'] return arr.join('\n') }, textStyle: { rich: { a: { color: '#666', fontSize: 14, padding: [3, 0, 0, 0], }, }, }, },（2）柱状图渐变色 color itemStyle: { color: (params) => { if (params.data === 0) { return } let gradientArr = [] gradientArr = [ { offset: 0, color: '#3AB236', }, { offset: 1, color: '#93E690', }, ] // 这里的this.$echarts是项目中的echarts示例，改成对应的名字就好 return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, gradientArr, false) }, barBorderRadius: [1, 1, 1, 1], // 柱状图圆角 },（3）每根柱子添加圆角、柱子上堆叠部分有空白间隙 圆角：barBorderRadius: [1, 1, 1, 1], 堆叠：设置 stack: 'one', ，即设置 stack 值相同即可 空白间隙：在 series 中配置 空白柱子 堆叠到原有柱子上 // 堆叠图 - 空白间距 let obj = { name: '空白间距', type: 'bar', stack: 'one', barWidth: 24, //柱子宽度 emphasis: this.emphasisStyle, data: this.blankSpace, itemStyle: { color: '#fff', barBorderRadius: [1, 1, 1, 1], }, }（4）背景虚线 yAxis: { name: 'XX项', splitLine: { show: true, // 背景虚线 lineStyle: { type: [5, 7], dashOffset: 5, }, }, //用于设置y轴的字体 axisLabel: { show: true, //这里的show用于设置是否显示y轴下的字体 默认为true textStyle: { //textStyle里面写y轴下的字体的样式 color: '#999', fontSize: 12, }, }, },（5）X轴和Y轴自定义样式 设置 xAxis 和 yAxis （6）坐标轴的 name 属性更改位置 （7）hover 时的 tooltip 自定义提示 使用 formatter 回调函数 （8）hover 时，柱状图设置阴影 （设置 axisPointer 属性），并且阴影不能遮挡柱子的颜色 hover 时设置背景阴影：在 tooltip 中设置 axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' ，不需要阴影设置为空 type:'' shadowStyle：{ color: 'red' //背景填充颜色 } },修改前： （9）图表随着浏览器窗口的改变而改变 window.addEventListener('resize', function () { //浏览器大小调整echarts随之改变 myChart.resize() })完整实现： export default { name: 'eCharts', data() { return { data1: [], data2: [], data3: [], data4: [], xAxisData: [], blankSpace: [], } }, mounted() { for (var i = 0; i showChart() { // 基于准备好的dom，初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('treeChart')) myChart.clear() // 堆叠图 - 空白间距 let obj = { name: '空白间距', type: 'bar', stack: 'one', barWidth: 24, //柱子宽度 data: this.blankSpace, itemStyle: { color: '#fff', barBorderRadius: [1, 1, 1, 1], }, } // 指定图表的配置项和数据 var option = { color: ['#3AB236', '#F3912E', '#EC4646', '#E6E6E6'], legend: { itemWidth: 12, itemHeight: 12, data: ['已完成', '未完成', '已超时', '未分配'], left: -5, // 距离左边 }, // 柱子背景阴影 tooltip: { trigger: 'axis', showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' }, // 自定义提示 formatter: (params) => { // 去除 ‘空白间距’ let newArr = [] params.forEach((work) => { if (work.seriesName != '空白间距') { newArr.push(work) } }) // 获取xAxis data中的数据 let dataStr = `${newArr[0].name} XX项600个 ` newArr.forEach((item) => { // 获取图标(小圆点)颜色，并且自定义样式为正方形，即要改变小圆点，只需重写marker的html片段，并修改样式即可 // 获取series中data // 获取seriersName console.log('item', item) dataStr += ` |
修改后： 
代码实现：
修改后：在 series 中给每个柱子添加层级 zlevel: 11 
【本文地址】
今日新闻 |
推荐新闻 |